<!-- 终端管理详情页 -->
<template>
  <div class="apk-detail-content">
    <el-card class="box-card">
      <el-descriptions title="基础信息">
        <el-descriptions-item label="设备序列号">{{
          phoneDetail.phoneBand
        }}</el-descriptions-item>
        <el-descriptions-item label="设备品牌型号">{{
          phoneDetail.phoneBand
        }}</el-descriptions-item>
        <el-descriptions-item label="操作系统">{{
          phoneDetail.phoneOs
        }}</el-descriptions-item>
        <!-- <el-descriptions-item label="用户">{{ phoneDetail.createBy }}</el-descriptions-item> -->
        <el-descriptions-item label="手机号码"
          >{{ phoneDetail.phoneNum }}
        </el-descriptions-item>
        <el-descriptions-item label="状态">
          <el-tag size="small">{{
            phoneDetail.phoneState
          }}</el-tag></el-descriptions-item
        >
        <el-descriptions-item label="安装apk数量">{{ phoneDetail.apkNum }}</el-descriptions-item>
        <el-descriptions-item label="风险apk数量">{{ phoneDetail.riskApkNum }}</el-descriptions-item>
      </el-descriptions>
    </el-card>
    <!-- 下面部分 -->
    <el-row :gutter="10" style="margin-top: 15px">
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">APP列表</div>
          <div class="fxchart">
            <el-table :data="tableData2" border style="width: 100%">
              <el-table-column type="index" width="50"></el-table-column>
              <el-table-column
                prop="appName"
                label="APP名称"
                show-overflow-tooltip
              />
              <el-table-column
                prop="appVersion"
                label="版本"
                show-overflow-tooltip
              />
              <!-- <el-table-column prop="appUpdatedate" label="发布时间" show-overflow-tooltip /> -->
              <!-- <el-table-column prop="appDeveloper" label="所属公司" show-overflow-tooltip /> -->
              <el-table-column prop="combatAppRisks" label="算法一风险情况" show-overflow-tooltip >
                <template slot-scope="scope">
                    <div v-if="scope.row.combatAppRisks.length == 0" style="color: #909399;">暂无</div>
                    <div v-else class="risk-tags">
                        <span class="risk-tag" v-for="item in scope.row.combatAppRisks" :key="item" type="danger">
                          <span  v-if="item.topic && item.topic.includes('1')">{{ item.riskContent }}</span>
                        </span>
                   </div>

                </template>
              </el-table-column>
              <el-table-column prop="combatAppRisks" label="算法二风险情况" show-overflow-tooltip >
                <template slot-scope="scope">
                    <div v-if="scope.row.combatAppRisks.length == 0" style="color: #909399;">暂无</div>
                    <div v-else class="risk-tags">
                      <span class="risk-tag" v-for="item in scope.row.combatAppRisks" :key="item" type="danger">
                        <span  v-if="item.topic && item.topic.includes('2')">{{ item.riskContent }}</span>
                      </span>
                   </div>

                </template>
              </el-table-column>
              <el-table-column prop="combatAppRisks" label="算法三风险情况" show-overflow-tooltip >
                <template slot-scope="scope">
                    <div v-if="scope.row.combatAppRisks.length == 0" style="color: #909399;">暂无</div>
                    <div v-else class="risk-tags">
                      <span class="risk-tag" v-for="item in scope.row.combatAppRisks" :key="item" type="danger">
                        <span  v-if="item.topic && item.topic.includes('3')">{{ item.riskContent }}</span>
                      </span>
                   </div>

                </template>
              </el-table-column>
              <el-table-column prop="installDate" label="上传时间" show-overflow-tooltip />

              <el-table-column prop="downloadUrl" label="下载">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="downloadApp(scope.row)"
                    >下载</el-button
                  >
                </template>
              </el-table-column>

            </el-table>
            <!-- 添加分页 -->
            <el-pagination
              style="text-align: center"
              background
              layout="prev, pager, next"
              :total="queryParams.total"
              :page-size="queryParams.pageSize"
              :current-page="queryParams.pageNum"
              @current-change="handleCurrentChange"
            />
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">风险统计</div>
          <div class="fxchart-risk">
            <p v-if="showChart" style="color: #909399; text-align: center">
              暂无数据
            </p>
            <div style="width: 100%; height: 100%" v-else>
              <riskChart />
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  detailPhone,
  listApk,
  downloadApk,
} from "@/api/applicationService/terminal.js";
import riskChart from "./echartsDom.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    riskChart,
  },
  //父组件向子组件传的值
  props: [],
  data() {
    //这里存放数据
    return {
      id: "",
      phoneDetail: {},
      tableData2: [],
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        phoneId: "",
        total: 0,
      },
      showChart: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    downloadApp(row) {
      downloadApk(row.appid).then((res) => {
        // 二进制的流
        const blob = new Blob([res]);
        const url = window.URL.createObjectURL(blob);
        const a = document.createElement("a");
        a.href = url;
        a.download = row.appName + ".apk";
        a.click();
      });
    },
    getList() {
      listApk(this.id, this.queryParams).then((r) => {
        this.tableData2 = r.rows;
        this.queryParams.total = r.total;
        this.queryParams.pageSize = r.pageSize;
      });
    },
    handleCurrentChange(val) {
      console.log(val);
      this.queryParams.pageNum = val;
      this.queryParams.pageSize = 10;
      this.getList();
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.id = this.$route.query.id;
    detailPhone(this.id).then((res) => {
      this.phoneDetail = res.data;
      this.getList();
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
::v-deep .el-table {
  min-height: auto;
  height: 60vh;
}

/* 允许单元格内容换行，适配不同分辨率 */
::v-deep .el-table .cell {
  white-space: normal !important;
  word-break: break-word;
  line-height: 1.4;
}

.fxchart {
  height: 60vh;
  overflow: auto;
}

.fxchart-risk{
    height: 58vh;
    overflow: hidden;
}

/* 风险标签容器与条目样式（替代内联样式，支持换行与缩略） */
.risk-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.risk-tag {
  color: #f56c6c;
  padding: 4px 6px;
  border-radius: 4px;
  background: #fdecec;
  max-width: 100%;
  word-break: break-word;
}

/* 响应式调整：窄屏缩小字号与内边距 */
@media (max-width: 1440px) {
  ::v-deep .el-table {
    font-size: 12px;
  }
  .risk-tag {
    font-size: 12px;
    padding: 3px 5px;
  }
}

@media (max-width: 1024px) {
  ::v-deep .el-table {
    font-size: 12px;
  }
  .risk-tag {
    font-size: 11px;
    padding: 2px 4px;
  }
}
</style>
